{% extends "base.html" %}

{% block title %}编辑用户 - 交易监控系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h2><i class="fas fa-user-edit me-2"></i>编辑用户</h2>
                    <a href="/admin/users" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> 返回用户列表
                    </a>
                </div>
                <div class="card-body">
                    {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                    {% endif %}
                    
                    {% if success %}
                    <div class="alert alert-success" role="alert">
                        操作成功！
                    </div>
                    {% endif %}
                    
                    <form method="post" action="/admin/users/edit/{{ user.id }}">
                        <div class="row">
                            <div class="col-md-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0"><i class="fas fa-user me-2"></i>基本信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-4">
                                            <label for="username" class="form-label fw-bold">用户名</label>
                                            <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}" required>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="session_duration" class="form-label fw-bold">会话时长（分钟）</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="session_duration" name="session_duration" value="{{ user.session_duration }}" min="10" max="1440" required>
                                                <span class="input-group-text">分钟</span>
                                            </div>
                                            <small class="text-muted">有效范围：10-1440分钟（24小时）</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0"><i class="fas fa-shield-alt me-2"></i>账户设置</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-4">
                                            <label class="form-label fw-bold d-block">账户状态</label>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="is_active" name="is_active" {% if user.is_active %}checked{% endif %}>
                                                <label class="form-check-label" for="is_active">
                                                    {% if user.is_active %}
                                                    <span class="text-success">账户已启用</span>
                                                    {% else %}
                                                    <span class="text-danger">账户已禁用</span>
                                                    {% endif %}
                                                </label>
                                            </div>
                                            <small class="text-muted">禁用账户将阻止用户登录系统</small>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="user_type" class="form-label fw-bold">用户类型</label>
                                            <select class="form-select" id="user_type" name="user_type" required>
                                                <option value="super_admin" {% if user.user_type == 'super_admin' %}selected{% endif %}>超级管理员</option>
                                                <option value="admin" {% if user.user_type == 'admin' %}selected{% endif %}>管理员</option>
                                                <option value="operator" {% if user.user_type == 'operator' %}selected{% endif %}>操作员</option>
                                                <option value="viewer" {% if user.user_type == 'viewer' %}selected{% endif %}>只读用户</option>
                                                <option value="visitor" {% if user.user_type == 'visitor' %}selected{% endif %}>参观用户</option>
                                            </select>
                                            <small class="text-muted">
                                                超级管理员：系统最高权限，可管理所有用户和系统配置<br>
                                                管理员：可管理用户和系统配置<br>
                                                操作员：可进行交易操作和品种管理<br>
                                                只读用户：只能查看信息，不能修改<br>
                                                参观用户：只能查看基本信息
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>账户信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-4">
                                            <p><strong>用户ID：</strong> {{ user.id }}</p>
                                        </div>
                                        <div class="mb-4">
                                            <p><strong>创建时间：</strong> {{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                                        </div>
                                        <div class="mb-4">
                                            <p><strong>最后登录：</strong> {{ user.last_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_login else '从未登录' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        <div class="d-flex justify-content-end mt-4">
                            <div class="d-flex gap-2">
                                <button type="button" onclick="window.location.href='/admin/users'" class="btn btn-primary btn-lg px-4">
                                    <i class="fas fa-times me-1"></i> 取消
                                </button>
                                <button type="submit" class="btn btn-primary btn-lg px-4">
                                    <i class="fas fa-save me-1"></i> 保存更改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码显示/隐藏功能
        const toggleButtons = document.querySelectorAll('.toggle-password');
        
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordInput = document.getElementById(targetId);
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    this.innerHTML = '<i class="fas fa-eye-slash"></i>';
                } else {
                    passwordInput.type = 'password';
                    this.innerHTML = '<i class="fas fa-eye"></i>';
                }
            });
        });
        
        // 状态切换时更新标签文本
        const isActiveSwitch = document.getElementById('is_active');
        const isActiveLabel = isActiveSwitch.nextElementSibling.querySelector('span');
        
        isActiveSwitch.addEventListener('change', function() {
            if (this.checked) {
                isActiveLabel.className = 'text-success';
                isActiveLabel.textContent = '账户已启用';
            } else {
                isActiveLabel.className = 'text-danger';
                isActiveLabel.textContent = '账户已禁用';
            }
        });
        
        // 权限切换时更新标签文本
        const isAdminSwitch = document.getElementById('is_admin');
        const isAdminLabel = isAdminSwitch.nextElementSibling.querySelector('span');
        
        isAdminSwitch.addEventListener('change', function() {
            if (this.checked) {
                isAdminLabel.className = 'text-primary';
                isAdminLabel.textContent = '管理员权限';
            } else {
                isAdminLabel.className = 'text-secondary';
                isAdminLabel.textContent = '普通用户';
            }
        });
    });
</script>
{% endblock %}